@import url('https://fonts.adobe.com/fonts/organetto-variable');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "organetto-variable",sans-serif;
    font-variation-settings: 'wdth' 100, 'wght' 400;
}

.heading-wrapper{
  font-size: 3.2rem;
  font-weight:600 ;
  margin-bottom: 1.5rem;
}


a{
  color: inherit;
  font-style:none;
  text-decoration: none;
}

a:hover, a:focus{
  color:inherit;
  text-decoration: inherit;
}

section{
  padding-top:2rem ;
  padding-bottom: 2rem;
}

.top-bar{
  position: relative;
  background:#000;
  color: #fff;
  font-size: 16px;
}


.top-bar .social-icons{
    margin: 0;
    padding: 0;
}

.top-bar i{
    margin: 5px 0;
    color: #fff;
}

.top-bar  i:hover {
    color: #d7d7d7; /* LinkedIn blue for hover, example */
  }

  .dropping-texts {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .dropping-texts > div {
    overflow: hidden;
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    position:absolute;
    font-weight:400;   
  }
  
  .dropping-texts > div:nth-child(1) {
    animation: roll 5s linear infinite 0s;
  }
  .dropping-texts > div:nth-child(2) {
    animation: roll 5s linear infinite 1s;
  }
  .dropping-texts > div:nth-child(3) {
    animation: roll 5s linear infinite 2s;
  }
  .dropping-texts > div:nth-child(4) {
    animation: roll 5s linear infinite 3s;
  }

  
  @keyframes roll {
    0% {
      font-size:0px;
      opacity:0;
      margin-left:-30px;
      margin-top:0px;
      transform: rotateX(-90deg);
    }
    3% {
      opacity:1;
      transform: rotateX(0deg);
    }
    5% {
      font-size:inherit;
      opacity:1;
      margin-left:0px;
      margin-top:0px;
    }
    20% {
      font-size:inherit;
      opacity:1;
      margin-left:0px;
      margin-top:0px;
      transform: rotate(0deg);
    }
    27% {
      font-size:0px;
      opacity:0.5;
      margin-left:20px;
      margin-top:100px;
      transform: rotateX(90deg);
    }
    100% {
      font-size:0px;
      opacity:0;
      margin-left:-30px;
      margin-top:0px;
      transform: rotate(15deg);
    }
  }

  .navbar-desktop{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5em 1em;
  }

.nav-menu-desktop {
  /* Base style for the container */
  display: flex;
  justify-content: center;
  align-items: center;
}

header .nav-menu-desktop {

  position: fixed;
  background: transparent; /* Start with transparent background */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* Cover the whole screen */
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  visibility: hidden; /* Hide entirely */
  opacity: 0; /* For a fade-in animation */
  /* Smooth transition for the opacity and visibility */
  transition: opacity 0.4s ease-in-out, visibility 0s 0.4s;
}


header .nav-menu-desktop.active {
  /* Final visible state */
  visibility: visible;
  opacity: 1; /* Fade in the container */
  background: rgba(0, 0, 0, 0.95); /* Elegant dark background */
  /* Delay the transition for visibility so it happens right away */
  transition: opacity 0.4s ease-in-out, visibility 0s 0s;
}


.nav-menu-desktop .items {
  /* Flex setup for the links */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px; /* Spacing between menu items */

  /* Animation setup: Slide from the right */
  transform: translateX(100%); /* Start position: completely off screen to the right */
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); /* Elegant spring-like timing */
}

.nav-menu-desktop.active .items {
  /* Final position: slide into view */
  transform: translateX(0);
}


.nav-menu-desktop .cross {
  position: absolute;
  top: 30px; /* Adjusted for better spacing */
  right: 30px;
  font-size: 2rem; /* A bit smaller for elegance */
  color: white;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity, transform 0.2s; /* Add a hover transition */
}

.nav-menu-desktop .cross:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.nav-menu-desktop .nav-item {
  font-size: 2.5rem; /* Large enough for mobile, but not too huge */
  text-align: center;
  color: white;
  font-weight: 700; /* Slightly less bold */
  padding: 10px 2rem;
  letter-spacing: 2px; /* Adds a touch of elegance */
  transition: background 0.3s, color 0.3s, border-radius 0.3s;
}

.nav-menu-desktop .nav-item:hover {
  background: #ffffff;
  color: #000;
  border-radius: 5px; /* More subtle corner */
}

.nav-menu-desktop .items a {
  opacity: 0; 
  transition: opacity 0.4s ease-out;
}

.nav-menu-desktop.active .items a:nth-child(1) { transition-delay: 0.1s; opacity: 1; }
.nav-menu-desktop.active .items a:nth-child(2) { transition-delay: 0.15s; opacity: 1; }
.nav-menu-desktop.active .items a:nth-child(3) { transition-delay: 0.2s; opacity: 1; }
.nav-menu-desktop.active .items a:nth-child(4) { transition-delay: 0.25s; opacity: 1; }

  .nav-icon i{
    font-size: 25px;
  }

  header{
    position: fixed;
    width: 100%;
    z-index: 100;
  }

  header::after{
    content:"";
    z-index: -1;
    position: absolute;
    height: 120px;
    width: 100%;
    top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.507), #ffffff00);
  }

  


  @media (max-width:768px)  {
 
    .top-bar{
      font-size: 12px;
    }

    .dropping-texts {
      height: 20px;
    }
  }

/* `````````````````````````````````````````header end here````````````````````````````````````````````````` */



/* `````````````````````````````````````````Hero banner starts here````````````````````````````````````````````````` */

.hero-banner{
  position: relative;
  height: 100vh;
  background-image: url("../images/home-banner.webp");
  background-position:center;
  background-size: cover;
  background-repeat: no-repeat;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: left;
  /*z-index: -2;*/
}



.hero-banner .shop-now{

  position: absolute;
  right: 0%;
  top: 20%;
  padding: 4rem;
}

.hero-banner .shop-now {
  text-align: right;
  text-transform: uppercase;
}

.hero-banner .shop-now h1{
  font-size: 5rem;
  font-family: "organetto-variable",sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  
}
.hero-banner .shop-now p{
  font-family: "organetto-variable",sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  
}



.hero-banner .shop-now button{
  padding: 5px 30px;
  border: 2px solid white;
  background: #000000;
  color: white;
  font-weight: 500;
}




.hero-banner .shop-now button:hover{
  padding: 5px 30px;
  border: 2px solid white;
  background: #0000007a;
  color: white;
  font-weight: 500;
}

@media (max-width:1179px){

  
  .hero-banner .shop-now h1{
    font-size: 4rem;
    
  }
  
}
@media (max-width:926px){

  
  .hero-banner .shop-now h1{
    font-size: 3.5rem;
    
  }
  
}
@media (max-width:768px){
  .hero-banner{
    background-image: url("../images/home-banner.webp");
    background-position: -120px;
  }

  .hero-banner{
    display: flex;
    justify-content: center;
    align-items: center;;
  }

  .hero-banner .shop-now{

    position: static;
    padding: 2rem;
    text-align: center;
  }


  .hero-banner .shop-now h1{
    font-size: 3.5rem;
    font-weight: 600;
    
  }


}

@media(max-width:709px){
  .hero-banner .shop-now h1{
    font-size: 3rem;
    
  }
}

@media(max-width:600px){
 
  .hero-banner .shop-now {
    text-align: center;
    text-transform: uppercase;
  }
  
  .hero-banner .shop-now h1{
    font-size: 2.5rem;
    font-weight: 600;
    
  }
  .hero-banner .shop-now p{
    font-size: .7rem;
  }
}
@media(max-width:500px){
  
  .hero-banner .shop-now {
    text-align: center;
    text-transform: uppercase;
    padding: .2rem;
  }
  
  .hero-banner .shop-now h1{
    font-size: 2rem;
    font-weight: 600;
    
  }
  .hero-banner .shop-now p{
    font-size: .7rem;
  }
}
@media(max-width:390px){
  
  .hero-banner .shop-now {
    text-align: center;
    text-transform: uppercase;
    padding: .2rem;
  }
  
  .hero-banner .shop-now h1{
    font-size: 1.8rem;
    font-weight: 600;
    
  }
  .hero-banner .shop-now p{
    font-size: .7rem;
    font-weight: 500;
  }
}
/* `````````````````````````````````````````Hero banner End here````````````````````````````````````````````````` */




/* `````````````````````````````````````````Category section Starts here````````````````````````````````````````````````` */

.category{
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* background: #000; */

}




.category .item-container .item{
  margin-bottom: 20px;
  min-height: 60vh;
  max-height: 550px;
  color: white;
  background-position:center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  border-radius: 20px;
  padding: 20px;
  padding-bottom: 50px;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.category .item-container .item i{
  font-size: 2rem;
  color: white;
}

@media (max-width:768px) {
  .heading-wrapper{
    font-size: 2rem;
    font-weight:600 ;
    margin-bottom: 1.5rem;
  }

}


@media (max-width:512px) {
  .heading-wrapper{
    font-size: 1.5rem;
    font-weight:600 ;
    margin-bottom: 1.5rem;
  }
  .category .item-container .item{
    min-height: 40vh;
    max-height: 450px;
  }
}


/* `````````````````````````````````````````Category section End here````````````````````````````````````````````````` */


/* `````````````````````````````````````````Activities section starts here````````````````````````````````````````````````` */


.badge{
  position: absolute;
  top:60px;
  left: -10px;
  color: #000;
  transform:rotate(-90deg);
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 400;
}




.activities .headings > a h2 {
  position: relative;
  display: inline-block; 
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 4.5rem;
  white-space: nowrap;
}

/* underline line (initially hidden) */
.activities .headings >a h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  /* margin-top: 10px; */
  background-color: black;
  transition: width 0.5s ease-in-out; /* smooth animation */
}

/* on hover, expand underline to full text width */
.activities .headings >a h2:hover::after {
  width: 100%;
}

.activities .image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 550px;
}

.activities .image-container a {
  position: absolute;
  width: 350px;
  transition: all 0.4s ease;
}

/* All images styled equally */
.activities .image-container img {
  width: 100%;
  height: 550px;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease, box-shadow 0.3s ease;
}

/* Stack + fan effect using nth-child */
.activities .image-container a:nth-child(7) {
  transform: rotate(-8deg) translateX(-10px);
  z-index: 1;
}
.activities .image-container a:nth-child(2) {
  transform: rotate(-4deg) translateX(-10px);
  z-index: 2;
}
.activities .image-container a:nth-child(3) {
  transform: rotate(10deg);
  z-index: 6;
}
.activities .image-container a:nth-child(4) {
  transform: rotate(4deg) translateX(10px);
  z-index: 4;
}
.activities .image-container a:nth-child(5) {
  transform: rotate(8deg) translateX(10px);
  z-index: 5;
} 
.activities .image-container a:nth-child(6) {
  transform: rotate(8deg) translateX(10px);
  z-index: 5;
} 
.activities .image-container a:nth-child(1) {
  transform: rotate(8deg) translateX(10px);
  z-index: 7;
} 

.activities .image-container a.active {
  z-index: 10;
  /* transform: scale(1.05); */
}

@media (max-width:1050px)
{
  
.activities .headings > a h2 {
  font-size: 3rem;
  line-height: 4rem;
}

}

@media (max-width:910px)
{
  
.activities .headings >a h2 {
  font-size: 2rem;
  line-height: 3rem;
}
.activities .image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 450px;
}

.activities .image-container a {
  position: absolute;
  width: 300px;
  transition: all 0.4s ease;
}

/* All images styled equally */
.activities .image-container img {
  width: 100%;
  height: 450px;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease, box-shadow 0.3s ease;
}

}

@media (max-width:767.90px){
  .badge{
    position: relative;
    top:0px;
    left: 0px;
    color: #000;
    transform:rotate(0deg);
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 500;
  }

  .activities .headings >a h2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 3.5rem;
  }
}

@media (max-width:512px)
{
  
.activities .headings >a h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 3.2rem;
}

}
  
@media (max-width:410px)
{
  
.activities .headings >a h2 {
  font-size: 1.2rem;
  line-height: 2.8rem;

}

}
 






/* `````````````````````````````````````````Activities section Ends here````````````````````````````````````````````````` */

/* `````````````````````````````````````````Slider section Starts here````````````````````````````````````````````````` */
.productSwiper .swiper-wrapper{
  height: 550px;
}

.card-slide {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 550px;

}

.card-slide img {
  width: 100%;
  height: 550px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card-slide:hover img {
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.overlay h3 {
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: capitalize;
}

.circle {
  width: 40px;
  height: 40px;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  transition: all 0.3s ease;
}

.circle:hover {
  background: white;
  color: black;
}

/* `````````````````````````````````````````Slider section End here````````````````````````````````````````````````` */

/* `````````````````````````````````````````Footer section Starts here````````````````````````````````````````````````` */








/* Base styles for the footer background and font */
.custom-footer {
  background-color: #000; /* Light gray background */
  color: #fff; /* Dark gray text */
  font-size: 16px;
  line-height: 4;
  padding-top: 4rem;

}

.custom-footer .row1{
  margin-bottom: 4rem;
}

/* Section Titles (e.g., JOIN THE MOVEMENT) */
.footer-title {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 1.25rem; /* ~20px spacing */
}

/* Standard text in the footer */
.footer-text {
  line-height: 1.6;
  font-size: inherit;

}

/* Links in lists (ABOUT US, HELP) */
.footer-links a {
  text-decoration: none;
  line-height: 3; /* Spacing between links */
  display: block;
  font-size: inherit;

}

.footer-links a:hover {
  color: #cfcfcf;
  text-decoration: underline;
}

/* Email Input Field Styling */
.custom-input {
  border: 1px solid #ccc;
  background-color: white;
  padding: 0.5rem 0.75rem;
  height: 40px; /* Consistent height */
}
.custom-input:focus {
  border-color: #2c2c2c;
  box-shadow: none;
}

/* SIGN UP Button Styling */
.custom-sign-up-btn {
  color:#000000;
  background-color: #ffffff;
  border-color: #ffffff;
  font-weight: bold;
  height: 40px;
  letter-spacing: 0.5px;
}
.custom-sign-up-btn:hover {
  background-color: #cfcfcf; /* Dark gray/black */
  border-color: #cfcfcf;
  color:#000000;

}

/* Social Icons (Facebook and Instagram) */
.social-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;  
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  background: #fff;
  color: #000;
  border-radius: 50%;
  transition: background 0.3s, color 0.3s;

}
.social-icon:hover {
  opacity: 0.7;
  color:#fff;
  background-color: #000;
}

/* QR Code Placeholder Style */


/* Horizontal Rule (Separator) */
.custom-hr {
  border-top: 1px solid #e0e0e0;
  margin-top: 0;
  margin-bottom: 1rem;
}



/* Copyright & Legal Links in the bottom bar */
.footer-copyright {
  font-size: 12px;
}
.footer-copyright a {
  text-decoration: none;
  white-space: nowrap; /* Keep legal links on one line if possible */
}
.footer-copyright a:hover {
  text-decoration: underline;
}

/* Responsive Adjustments (Bootstrap handles most of the layout, but
 some text alignment can be fine-tuned for smaller screens) */
@media (max-width: 768px) {

  .custom-footer{
    margin-top: 2rem;
  }

  .input-group, .custom-sign-up-btn {
      max-width: 300px; /* Constrain width of form elements */
  }

  .col-12.text-end {
      /* text-align: center !important; Center social icons */
      margin-bottom: 1rem;
  }

}


/* ```````````````````````about us  ``````````````````````````````````````` */

.about-hero-banner{
  padding: 10px;
  padding-top: 40px;
}

.about-hero-banner .hero-banner{
  border-radius: 15px;
}

/* `````````````````````````````````````brand Intro starts here  ``````````````````````````````` */

.brand-intro{
  padding-top: 100px;
}

.about-activities{
  margin-top: 100px;
}

.brand-intro .outer {
  padding:30px;
  border-radius: 500px;
  border: 1.5px solid rgb(148, 148, 148);
  width: 900px
  /* max-width: 100%; */

}

.brand-intro .outer .middle {
  padding:30px;
  border-radius: 900px;
  border: 1.5px solid rgb(148, 148, 148);
  width: 100%;

}



.brand-intro .col{
  position: relative;
  align-items: center;
  justify-content: center;
}

.brand-intro .col .pin{
  z-index: -1;
  position: absolute;
  top: -50px;
  right:50%;
}

.brand-intro .col  .pin .dot{
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 100%;
  transform: translate(-50%);
}


.brand-intro .col  .pin .line{
  width: 1px;
  height: 120px;
  background-color: #000;
  border-radius: 100%;
  transform: translate(-50%);
}
.brand-intro .col .inner{
  background-image: url("../images/brand-intro.webp");
  width: 100%;
  height: 400px;
  border-radius:  600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: start;
  padding-top: 70px;

}

.brand-intro .col .inner .text{
  font-family: "organetto-variable",'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  color: white;
  font-weight: 400;
  font-size: 1.1rem;
  width: 90%;
  text-align: center;
}


.brand-intro .shoes-image{
  position: absolute;
  z-index: 100;
  bottom: -104px;
  /* width: 60%; */
  display: flex;justify-content: center;
}

@media (max-width:992px){
  .brand-intro{
    padding-top: 100px;
  }
  
  .about-activities{
    margin-top: 80px;
  }
  .brand-intro .col{
    align-items: start;
  }
  
  .brand-intro .outer {
    padding:25px;
    width: 600px
    /* max-width: 100%; */
  
  }
  
  .brand-intro .outer .middle {
    padding:25px;
  }
  

  .brand-intro .col .inner{
    height: 300px;
    padding-top: 70px;
  
  }
  
  .brand-intro .col .inner .text{
    font-size: .8rem;
  }
  
  
  .brand-intro .shoes-image{
    bottom: -50px;
  }

  .brand-intro .shoes-image img{
      max-width: 500px;
  }
}

@media (max-width:600px){
  .brand-intro{
    padding-top: 100px;
  }
  
  .about-activities{
    margin-top: 60px;
  }
  .brand-intro .col{
    align-items: start;
  }
  
  .brand-intro .outer {
    padding:15px;
    width: 600px
    /* max-width: 100%; */
  
  }
  
  .brand-intro .outer .middle {
    padding:15px;
  }
  

  .brand-intro .col .inner{
    height: 300px;
    padding-top: 65px;
  
  }
  
  .brand-intro .col .inner .text{
    font-size: .8rem;
  }
  
  
  .brand-intro .shoes-image{
    bottom: -60px;
  }

  .brand-intro .shoes-image img{
      max-width: 450px;
  }
}

@media (max-width:550px){
  .brand-intro .shoes-image{
    bottom: -80px;
  }
}

@media (max-width:500px){
  .brand-intro{
    padding-top: 100px;
  }
  
  .about-activities{
    margin-top: 40px;
  }
  .brand-intro .col{
    align-items: start;
  }
  
  .brand-intro .outer {
    padding:15px;
    width: 300px
    /* max-width: 100%; */
  
  }
  
  .brand-intro .outer .middle {
    padding:15px;
  }
  

  .brand-intro .col .inner{
    height: 500px;
    padding-top: 65px;
  
  }
  
  .brand-intro .col .inner .text{
    font-size: .8rem;
  }
  
  
  .brand-intro .shoes-image{
    bottom: -60px;
  }

  .brand-intro .shoes-image img{
    min-width: 300px;
    max-width: 400px;
  }
}

@media (max-width:400px){
  
  .brand-intro .shoes-image{
    bottom: -0px;
  }

  .brand-intro .shoes-image img{
    min-width: 300px;
      max-width: 300px;
  }
}

.vision{
  padding-top: 100px;
}

.vision-image{
  width: 100%;
  height: 100%;
}



/* `````````````````````````````````````brand Intro  end here `````````````````````````````` */

/* ````````````````````````````````````````product section``````````````````````````````````````` */

.product-banner {
  min-height: 600px; /* Tall enough to be impactful */
  /* Light overlay on a background placeholder to ensure text contrast */
  background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.85)), url('../images/home-banner.webp'); 
  background-size: cover;
  background-position: center;
  padding: 50px 0;
}
.banner-text{
  padding: 2rem;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  max-width: 900px;
  text-align: right;
}


.product-banner .banner-title {
  
  font-family: "organetto-variable",sans-serif;
  font-size: 5rem; /* Responsive text size for mobile */
  font-variation-settings: 'wdth' 200, 'wght' 800;
  font-weight: 800;
  color: #171717;
  margin-bottom: 15px;
}

.product-banner .banner-subtitle {
  font-size: 1.1rem;
  color: #495057;
  

}

@media (max-width:1400px){
  .product-banner {
      background-position: center;
  }
  
  
  
  .product-banner .banner-title {
      
      font-size: 4.5rem; /* Responsive text size for mobile */
      margin-bottom: 10px;
  }
  
  .product-banner .banner-subtitle {
      font-size: 1.1rem;
      
  
  }
}

@media (max-width:1200px){
  .product-banner {
      background-position: center;
  }
  
  
  
  .product-banner .banner-title {
      
      font-size: 4rem; /* Responsive text size for mobile */
      margin-bottom: 10px;
  }
  
  .product-banner .banner-subtitle {
      font-size: 1.1rem;
      
  
  }
}
@media (max-width:1000px){
  .product-banner {
      background-position: center;
  }
  
  
  
  .product-banner .banner-title {
      
      font-size: 3rem; /* Responsive text size for mobile */
      margin-bottom: 10px;
  }
  
  .product-banner .banner-subtitle {
      font-size: .8rem;
      
  
  }
}
@media (max-width:800px){
  .product-banner {
      background-position: center;
  }
  
  
  
  .product-banner .banner-title {
      
      font-size: 3rem; /* Responsive text size for mobile */
      margin-bottom: 10px;
  }
  
  .product-banner .banner-subtitle {
      font-size: .8rem;
      
  
  }
}

@media (max-width:767.98px){
  .product-banner {
      background-position: center;
  }

  .banner-text{
      width: 100%;
      text-align: center;

  }
  
  
  
  .product-banner .banner-title {
      
      font-size: 3rem; /* Responsive text size for mobile */
      margin-bottom: 10px;
  }
  
  .product-banner .banner-subtitle {
      font-size: .8rem;
      
  
  }
}

@media (max-width:537.98px){

  .banner-text{
      padding: 0;
  }
  
  
  .product-banner .banner-title {
      
      font-size: 2.5rem; /* Responsive text size for mobile */
      margin-bottom: 10px;
  }
  
  .product-banner .banner-subtitle {
      font-size: .6rem;
      
  
  }
}
@media (max-width:400px){

  .product-banner .banner-title {
      
      font-size: 2rem; /* Responsive text size for mobile */
  }
  
}



/* Responsive adjustments for large screens */
/* --- End Product Banner Styling --- */


.category-option{
  display: flex;
  align-items:center ;
  justify-content: center;
  flex-direction: column;
}

.category-image{
  
  border-radius: 50%;
  overflow: hidden;
}
.active{
  border: 2px solid black;
  filter: drop-shadow(0 0 5px black);
}

.category-option .active{
  border: 2px solid black;
  filter: drop-shadow(0px 0px 10px black)
}

.category-image img{
  width: 200px;
}
.category-title h2{
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
  text-transform:uppercase;
}

@media (max-width:768px)
{
  
  .category-image img{
      width: 100%;
  }
}

@media (max-width:575px)
{

  .product-banner{
      background-position: -100px;
    }

  .category-title h2{
      text-align: center;
      font-size: 1em;
      font-weight: 700;
  } 
}

@media (max-width:385px)
{
  .category-title h2{
      text-align: center;
      font-size: .8em;
      font-weight: 700;
  } 
}


/* --- CSS Grid Layout for Products --- */

.category-heading{
  font-size: 2rem;
  text-align: center;
}

.product-title{
  font-size: 1rem;
  text-transform: uppercase;
}

.product-grid-container {
  display: grid;
  gap: 0.1rem; /* Small gap between product items */
}

/* 1. Mobile (default: roughly equivalent to two 'col-5' items) */
.product-grid-container {
  /* Two columns, each taking an equal fraction of the available space */
  grid-template-columns: repeat(2, 1fr); 
  /* Center the grid items visually by centering the grid itself (optional) */
}

/* 2. Medium Devices (md: >= 768px) - equivalent to four 'col-md-3' */
@media (min-width: 768px) {
  .product-grid-container {
      /* Four equal columns */
      grid-template-columns: repeat(3, 1fr); 
      gap: .5rem; /* Larger gap on desktop */
      padding: 0 1rem;
  }
}

/* 3. Large Devices (lg: >= 992px) - still four columns (col-lg-3) */
@media (min-width: 992px) {
  .product-grid-container {
      grid-template-columns: repeat(4, 1fr);
      gap: .5rem; 
      padding: 0 0rem;
  }
}


/* --- Product Item Styling (Optional but Good Practice) --- */
.product-grid-item {
  /* The product card itself will take the full space of its grid cell */
  width: 100%; 
}

/* Ensure images fill their container */
.main-image-area img {
  width: 100%;
  height: auto;
  display: block;
}

/* ````````````````````````````````````````product section end``````````````````````````````````````` */